<template>
	<view style="min-height: 100vh;background: #F3F3F3;">
		<view class="ProductBox">
			<view class="ProductItem" v-for="(item,index) in list" :key="index" @click="toFoodDetails" :data-id="item.shop_id">
				<view class="ItemTop">
					<view class="ProductImage" :style="{'background-image':'url('+getImage(item.Shop.image_url)+')'}">
						<!-- <image :src="getImage(item.Shop.image_url)" mode=""></image> -->
					</view>
					<view class="ProductInfo">
						<view class="ProductNameBox">
							<view class="ProductName">{{item.Shop.name}}</view>
							<view class="sales-volume">售{{item.Shop.sales_volume_sum}}</view>
						</view>
						<view class="addressBox">
							<view class="address">{{item.Shop.industry.name}}</view>
							<view class="addressNum">{{item.distance}}km</view>
						</view>
					</view>
				</view>
				<view class="ItemBottom">
					<view class="couponBox" v-for="(pitem,pindex) in item.ShopPackageList" :key="pindex">
						<view class="couponIcon">惠</view>
						<view class="couponPrice">{{pitem.ShopPackage.money}}元</view>
						<view class="coupontext">{{pitem.ShopPackage.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				id:"",
				list:[],
				page:1,
				moreFlag:false,
				initLat:"",
				initLng:""
			}
		},
		onReachBottom() {
			if(!this.moreFlag){
				return false;
			}
			this.moreFlag = false;
			this.page = this.page + 1;
			this.getList();
		},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.id = options.id;
			this.initLat = uni.getStorageSync("initLat");
			this.initLng = uni.getStorageSync("initLng");
			this.getList();
		},
		methods: {
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			getList(){
				let obj = {};
				obj.shop_evaluation_id = this.id;
				// obj.page = this.page;
				let newObj = {};
				newObj.page = this.page;
				newObj.data = obj;
				if(uni.getStorageSync("rmToken")){
					this.$u.api.shopEvaluationRelationList(newObj).then(res=>{
						console.log(res)
						if(this.page==1){
							this.list = res.data.list.data.map(cur=>{
								cur.distance = app.$vm.getDistance(Number(cur.Shop.dimension),Number(cur.Shop.longitude));
								return cur;
							});
						}else{
							this.list = this.list.concat(res.data.list.data.map(cur=>{
								cur.distance = app.$vm.getDistance(Number(cur.Shop.dimension),Number(cur.Shop.longitude));
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}else{
					this.$u.api.shopEvaluationRelationListNoLogin(newObj).then(res=>{
						console.log(res)
						if(this.page==1){
							this.list = res.data.list.data.map(cur=>{
								cur.distance = app.$vm.getDistance(Number(cur.Shop.dimension),Number(cur.Shop.longitude));
								return cur;
							});
						}else{
							this.list = this.list.concat(res.data.list.data.map(cur=>{
								cur.distance = app.$vm.getDistance(Number(cur.Shop.dimension),Number(cur.Shop.longitude));
								return cur;
							}));
						}
						if(this.page<res.data.list.last_page){
							this.moreFlag = true;
						}else{
							this.moreFlag = false;
						}
					})
				}
			},
			toFoodDetails(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				uni.navigateTo({
					url:"/pages/pagetwo/pages/FoodDetails/FoodDetails?id="+id
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.ProductBox{
		padding: 16upx 24upx;
		.ProductItem{
			width: 702upx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 20upx;
			padding: 24upx;
			margin-bottom: 16upx;
			.ItemTop{
				display: flex;
				border-bottom: 2upx solid #F5F5F5;
				padding-bottom: 16upx;
				.ProductImage{
					width: 144upx;
					height: 144upx;
					border-radius: 8upx;
					// background-color: #FFAC3F;
					margin-right: 24upx;
					background-position: center;
					background-size: cover;
					image{
						width: 100%;
						height: 100%;
						border-radius: 8upx;
					}
				}
				.ProductInfo{
					width: calc(100% - 168upx);
					.ProductNameBox{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.ProductName{
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #333333;
						}
						.sales-volume{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF8255;
						}
					}
					.addressBox{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 16upx;
						.address{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
						.addressNum{
							font-size: 16upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}
					.ranking{
						width: auto;
						// width: 130upx;
						// height: 28upx;
						background: #FFF3C8;
						opacity: 1;
						border-radius: 8upx;
						padding: 8upx;
						font-size: 12upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #683B00;
						margin-top: 12upx;
						display: inline-block;
					}
					.evaluateBox{
						display: flex;
						align-items: center;
						flex-wrap: wrap;
						margin-top: 16upx;
						.evaluateItem{
							// width: 100px;
							// height: 20px;
							background: #FFF5EA;
							opacity: 1;
							border-radius: 8upx;
							padding:4upx 8upx;
							font-size: 12upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FFAC3F;
							margin-right: 16upx;
							margin-bottom: 16upx;
						}
					}
				}
			}
			.ItemBottom{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				// padding-top: 16upx;
				.couponBox{
					display: flex;
					align-items: center;
					margin-right: 64upx;
					margin-top: 20upx;
					.couponIcon{
						width: 28upx;
						height: 28upx;
						background: #FFAC3F;
						opacity: 1;
						border-radius: 8upx;
						text-align: center;
						line-height: 28upx;
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #FFFFFF;
					}
					.couponPrice{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #FFAC3F;
						margin-left: 8upx;
					}
					.coupontext{
						font-size: 16upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						margin-left: 8upx;
					}
				}
				.couponBox:nth-child(2n+2){
					margin-right: 0;
				}
			}
		}
	}
</style>
